<template>
  <div class="app-container">
    <el-card v-if="jobInfo">
      <div slot="header" class="clearfix">
        <span>
          任务详情:
          <span style="font-size: 20px; padding-left: 5px">{{ jobInfo.name }}</span>
        </span>
        <el-button style="float: right; padding: 3px 0" type="text" @click.native="showJobConfirmModal = true">执行</el-button>
      </div>
      <el-row>
        <el-col>
          <span>
            导入方式:
            <span>{{ jobInfo.importType }}</span>
          </span>
        </el-col>
        <el-col :span="8">
          <span>
            原实例类型:
            <!-- <span>{{ jobInfo.sourceType }} </span> -->
            <span>Oracle </span>
          </span>
        </el-col>
        <el-col :span="8">
          <span>
            原实例:
            <span>{{ jobInfo.sourceInstance.host }} </span>
          </span>
        </el-col>
        <el-col :span="8">
          <span>
            原Database:
            <span>{{ jobInfo.sourceDatabase.name }} </span>
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span>
            目标实例类型:
            <!-- <span>{{ jobInfo.destType }}</span> -->
            <span>MySQL </span>
          </span>
        </el-col>
        <el-col :span="8">
          <span>
            目标实例:
            <span>{{ jobInfo.destInstance.host }} </span>
          </span>
        </el-col>
        <el-col :span="8">
          <span>
            目标Database:
            <span>{{ jobInfo.destDatabase.name }} </span>
          </span>
        </el-col>
        <el-col :span="8">
          <span>
            描述:
            <span>{{ jobInfo.description }} </span>
          </span>
        </el-col>
        <el-col :span="8">
          <span>
            用户:
            <span>{{ jobInfo.user }} </span>
          </span>
        </el-col>
      </el-row>
    </el-card>
    <br />
    <el-card>
      <div slot="header" class="clearfix">
        <span> 导入列表: </span>
        <el-button style="float: right; padding: 3px 0" type="text" @click.native="addTranferTask">添加传输表</el-button>
      </div>
      <Table :columns="taskColumns" :data="taskDatas" size="small" @on-expand="onExpand"></Table>
    </el-card>
    <task-action v-if="showTaskActionModal" :action="action" :task-action-modal="showTaskActionModal" :job-info="jobInfo" @on-task-change="setTaskActionModal"></task-action>
    <job-confirm-modal :v-if="showJobConfirmModal" :job-confirm-modal="showJobConfirmModal" :job-info="jobInfo" @on-job-change="setJobConfirmModal"></job-confirm-modal>
    <task-log :v-if="showTaskLogModal" :task-log="showTaskLogModal" :task-info="taskInfo" @on-task-log-close="setTaskLogModal"></task-log>
  </div>
</template>

<script>
import { getTransferJob, executeTransferJob } from '@/api/transfer/job'
import { getTransferTaskList } from '@/api/transfer/task'
import { snakeCaseObject } from '@/libs/object'
import { taskColumns } from '@/views/transfer/job/components/config'
import TaskAction from '@/views/transfer/task/TaskAction'
import JobConfirmModal from '@/views/transfer/job/components/JobConfirm'
import TaskLog from '@/views/transfer/job/components/TaskLog'

export default {
  name: 'JobDetail',
  components: { TaskAction, JobConfirmModal, TaskLog },
  data() {
    return {
      instanceColumns: [],
      taskColumns: [],
      jobInfo: {},
      taskInfo: {},
      taskDatas: [],
      expandedDatabaseName: '',
      action: {
        title: '创建',
        type: 'create'
      },
      showTaskDeleteModal: false,
      showTaskActionModal: false,
      showJobConfirmModal: false,
      showTaskLogModal: false
    }
  },
  computed: {
    jobId() {
      return this.$route.params.jobId
    }
  },
  mounted() {
    this.taskColumns = taskColumns(this)
    this.getTransferJob()
    this.getTransferTaskList()
  },
  methods: {
    addTranferTask() {
      this.action = {
        title: '创建',
        type: 'create'
      }
      this.showTaskActionModal = true
    },
    async getTransferJob() {
      const { data } = await getTransferJob(snakeCaseObject(this.jobId))
      this.jobInfo = data
    },
    async executeTransferJob() {
      const { data } = await executeTransferJob(snakeCaseObject(this.jobId))
      this.jobInfo = data
    },
    async getTransferTaskList() {
      const { data } = await getTransferTaskList(snakeCaseObject({ jobId: this.jobId }))
      this.taskDatas = data
    },
    setJobConfirmModal(val) {
      this.showJobConfirmModal = val['status']
      console.log(this.showJobConfirmModal)
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'create')) {
        this.getTransferTaskList()
      }
    },
    setTaskActionModal(val) {
      this.showTaskActionModal = val['status']
      if (val['status']) {
        this.TaskInfo = {}
        this.action = {
          title: '创建',
          type: 'create'
        }
      }
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'create')) {
        this.getTransferTaskList()
      }
    },
    setTaskLogModal(val) {
      this.showTaskLogModal = false
    },
    onExpand(row, status) {
      this.tasksDatas.splice()
      if (status) {
        this.tasksDatas.filter((item, index) => {
          item._expanded = item.name === row.name
          this.expandedDatabaseName = row.name
          return item
        })
      } else {
        this.tasksDatas.map((item, index) => {
          item._expanded = false
          return item
        })
      }
    }
  }
}
</script>

<style lang='scs' scoped>
</style>
<style>
.el-card__header {
  padding: 10px 10px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
